// require("./test.js");

import { ToyReact, Component } from './ToyReact.js';


// https://codepen.io/gaearon/pen/aWWQOG?editors=0010
// 从以上 URL 中复制代码，然后改为自己 ToyReact 实现的函数
// 此为 React 教程中的 tic-tac-toe Game，中文翻译为“井字棋”

// 棋盘格子组件
class Square extends Component {
  // constructor() {
  //   super();
  //   // state 只是 Square 的普通变量
  //   this.state = { value: null };
  // }

  render() {
    return (
      // // this.props 需要实现的函数
      // <button className="square" onClick={
      //   // ()=> console.log(6)
      //   // setState 是由 Component 提供的函数实现
      //   () => this.setState({ value: 'X' })
      // }>
      //   {/* {this.props.value} */}
      //   {this.state.value}
      // </button>

      <button className="square" onClick={this.props.onClick}>
        {this.props.value}
      </button>
    );
  }
}

// 游戏面板组件
class Board extends Component {
  // constructor(props) {
  //   super(props);
  //   this.state = {
  //     squares: Array(9).fill(null),
  //     xIsNext: true,
  //   };
  // }

  // handleClick(i) {
  //   const squares = this.state.squares.slice();
  //   if (calculateWinner(squares) || squares[i]) {
  //     return;
  //   }
  //   squares[i] = this.state.xIsNext ? 'X' : 'O';
  //   this.setState({
  //     squares: squares,
  //     xIsNext: !this.state.xIsNext,
  //   });
  // }

  renderSquare(i) {
    return (
      <Square
        value={this.props.squares[i]}
        onClick={() => this.props.onClick(i)}
      />
    );
  }

  render() {
    // const winner = calculateWinner(this.state.squares);
    // let status;
    // if (winner) {
    //   status = 'Winner: ' + winner;
    // } else {
    //   status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
    // }

    return (
      <div>
        {/* <div className="status">{status}</div> */}
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

// 游戏组件
class Game extends Component {
  constructor(props) {
    super(props);
    this.state = {
      history: [
        {
          squares: Array(9).fill(null)
        }
      ],
      stepNumber: 0,
      xIsNext: true
    };
  }

  handleClick(i) {
    debugger
    const history = this.state.history.slice(0, this.state.stepNumber + 1);
    const current = history[history.length - 1];
    const squares = current.squares.slice();
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    squares[i] = this.state.xIsNext ? "X" : "O";
    this.setState({
      history: history.concat([
        {
          squares: squares
        }
      ]),
      stepNumber: history.length,
      xIsNext: !this.state.xIsNext
    });
  }

  jumpTo(step) {
    this.setState({
      stepNumber: step,
      xIsNext: (step % 2) === 0
    });
  }

  render() {
    const history = this.state.history;
    const current = history[this.state.stepNumber];
    const winner = calculateWinner(current.squares);

    const moves = history.map((step, move) => {
      const desc = move ?
        'Go to move #' + move :
        'Go to game start';
      return (
        <li key={move}>
          <button onClick={() => this.jumpTo(move)}>{desc}</button>
        </li>
      );
    });

    let status;
    if (winner) {
      status = "Winner: " + winner;
    } else {
      status = "Next player: " + (this.state.xIsNext ? "X" : "O");
    }

    return (
      <div className="game">
        <div className="game-board">
          3 
          <Board
            squares={current.squares}
            onClick={i => this.handleClick(i)}
          />
        </div>
        <div className="game-info">
          1
          <div>{status}</div>
          <ol>{moves}</ol>
        </div>
      </div>
    );
  }
}

ToyReact.render( <Game />, document.body );

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

// ========================================
// 第一天内容，通过 JSX 了解 React 的组件是如果执行的

// 自定义组件
// class MyComponent extends Component {
//   // 自定义组件需要有一个 render 函数用于渲染元素
//   render(h) {
//     return <div>
//       <span>
//         {this.children}
//         {true}
//       </span>
//     </div>;
//   }
// }

// 大写开头作为变量 传入 createElement 函数中
// let t_mc = <MyComponent name="a" id="ida"><p>111</p>{false}</MyComponent>;

// ToyReact.render(t_mc, document.body);

// 小写开头作为字符串 传入 createElement 函数中
// let t_div = <div name="a" id="ida">
//   <span>Toy React - </span>
//   <span>Hello </span>
//   <span>World!</span>
// </div>;

// ToyReact.render(t_div, document.body);

// var t_div_parse = ToyReact.createElement("div", {
//   name: "a",
//   id: "ida"
// },
//   ToyReact.createElement("span", null),
//   ToyReact.createElement("span", null),
//   ToyReact.createElement("span", null)
// );
